<template>
    <div class="container">
        <div class="choice-warp">
            <div class="tag">
                <span class="tab-title">标签:</span>
                <ul class="tag-list" @click="changeTagIndex">
                    <li
                        class="tag-item"
                        v-for="(item, index) in tagList"
                        :key="item.id"
                        :class="{ active: tagIndex == index }"
                        :data-id="item.id"
                        :data-index="index"
                    >
                        {{ item.name }}
                    </li>
                </ul>
            </div>
            <div class="category">
                <span class="tab-title">分类:</span>
                <ul class="category-list" @click="changeCateIndex">
                    <li
                        class="category-item"
                        v-for="(item, index) in cateList"
                        :key="index"
                        :class="{ active: categoryIndex == index }"
                        :data-id="item.id"
                        :data-index="index"
                    >
                        {{ item.name }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="blog-list" v-show="bloglist.length">
            <div
                class="blog-item"
                v-for="(item, index) in bloglist"
                :key="index"
            >
                <blog-card :item="item" />
            </div>
        </div>
        <div class="noData" v-show="!bloglist.length">
            <None></None>
        </div>
    </div>
</template>

<script>
import { queryByCateTag } from '@/api/index'
import blogCard from '@/components/blogCard'

export default {
    name: 'choice',
    props: {},
    components: { blogCard },
    data() {
        return {
            bloglist: JSON.parse(sessionStorage.getItem('ARTICLE_LIST')),
            tagIndex: 0,
            tagId: 0,
            categoryId: 0,
            categoryIndex: 0,
            tagList: Object.freeze(
                JSON.parse(sessionStorage.getItem('TAG_LIST'))
            ),
            cateList: Object.freeze(
                JSON.parse(sessionStorage.getItem('CATEGORY_LIST'))
            ),
        }
    },
    watch: {
        $route() {},
    },
    methods: {
        async initPage(tagId) {
            setTimeout(() => {
                this.$nextTick(() => {
                    this.$emit('updateHandle')
                })
            }, 0)
            let tagList = this.$store.getters.tagList
            let cateList = this.$store.getters.cateList
            console.log(cateList, 'cateList测试')
            console.log(tagList, 'tagList测试')
            if (tagList.length == 0) {
                console.log('本地储存没有全部标签信息，重新请求')
                await this.$store.dispatch('tag/getTag')
                tagList = this.$store.getters.tagList
            }
            if (cateList.length == 0) {
                console.log('本地储存没有分类信息，重新请求')
                await this.$store.dispatch('category/getCate')
                console.log(this.$store.getters.cateList)
                cateList = this.$store.getters.cateList
            }
            this.tagList = tagList
            this.cateList = cateList

            // 请求标签信息
            this.tagIndex = tagId
            this.tagId = tagId || 0
            this.getData()
        },
        async changeTagIndex(e) {
            if (e.target.dataset.index) {
                this.tagIndex = e.target.dataset.index
                this.tagId = e.target.dataset.id
                this.getData()
            }
        },
        async getData() {
            if (this.categoryId == 0 && this.tagId == 0) {
                this.bloglist = JSON.parse(
                    sessionStorage.getItem('ARTICLE_LIST')
                )
            } else {
                const { data: r } = await queryByCateTag({
                    cateID: this.categoryId,
                    tagID: this.tagId,
                })
                const len = r.length
                this.$message.success({
                    message: `切换成功，共找到${len}条结果`,
                    type: 'success',
                    duration: 1000,
                })
                console.log(r, 'woisadabhs')
                this.bloglist = r
            }
        },
        async changeCateIndex(e) {
            if (e.target.dataset.index) {
                this.categoryIndex = e.target.dataset.index
                this.categoryId = e.target.dataset.id
                this.getData()
            }
        },
    },
    created() {
        this.initPage(this.$route.params.tagId)
        console.log([...this.tagList], '标签')
        console.log(this.$route.params.tagId)
        const a = [...this.tagList].find((e) => {
            return e.id == this.$route.params.tagId
        })
        console.log(a, '查找结果')
    },
}
</script>
<style lang="less" scoped>
.active {
    color: var(--default);
}
.container {
    .choice-warp {
        .tag {
            display: flex;
            margin-bottom: 10px;
            .tab-title {
                width: 50px;
                padding: 10px 0px;
            }
            .tag-list {
                display: flex;
                flex-wrap: wrap;
                flex: 1;
                .tag-item {
                    cursor: pointer;
                    margin: 0px 8px;
                    padding: 10px 0px;
                    font-size: 14px;
                }
            }
        }
        .category {
            display: flex;
            margin-bottom: 10px;
            align-items: center;
            .tab-title {
                width: 50px;
                padding: 10px 0px;
            }
            .category-list {
                display: flex;
                flex-wrap: wrap;
                flex: 1;

                .category-item {
                    cursor: pointer;
                    margin: 0px 8px;
                    padding: 10px 0px;
                    font-size: 14px;
                }
            }
        }
    }
}
.noData {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
}
</style>
